<template>
	<view>
		<view class="bg-white tab_box py-1 px-2 flex justify-around">
			<view v-for="(item, index) of tabs" :key="index" class="h6" :class="{ active: current == index }" @click="tabChange(index)">
				<text>{{ item }}</text>
				<text v-if="index == 0" class="font-small">({{ listNum.enterprise_count || 0 }})</text>
				<text v-if="index == 1" class="font-small">({{ listNum.journalism_count || 0 }})</text>
				<text v-if="index == 2" class="font-small">({{ listNum.product_count || 0 }})</text>
				<text v-if="index == 3" class="font-small">({{ listNum.video_count || 0 }})</text>
				<text v-if="index == 4" class="font-small">({{ listNum.zhanhui_count || 0 }})</text>
			</view>
		</view>
		<view class="cont_box">
			<view v-if="list.length <= 0"><image class="empty_img" src="/static/img2/home/empty_img.png" mode=""></image></view>
			<view v-else :class="{ cont_h: current == 2 || current == 4 }">
				<!-- 企业 -->
				<view class="py-3 px-2" v-if="current == 0"><company-list :list="list" check-types="qy"></company-list></view>
				<!-- 新闻 -->
				<view class="bg-white py-3 px-2" v-else-if="current == 1"><news-list :list="list"></news-list></view>
				<!-- 产品 -->
				<view class="py-3 px-2 mt-3" v-else-if="current == 2"><product-list :list="list" :btn-show="false" class="flex flex-wrap justify-between"></product-list></view>
				<!-- 视频 -->
				<view class="bg-white py-3 px-2" v-else-if="current == 3"><video-view :list="list"></video-view></view>
				<!-- 展会 -->
				<view class="py-3 px-2" v-else><exhibition :list="list" :bgstyle="true"></exhibition></view>
				<u-loadmore :status="status" color="#E5E5E5" lineColor="#E5E5E5" dashed line />
			</view>
		</view>
	</view>
</template>

<script>
import { searchList } from '@/api/home/search.js';
import companyList from '@/components/company_list.vue';
import newsList from '@/components/news_list.vue';
import productList from '@/components/product_list/product_list.vue';
import exhibition from '@/components/exhibition/exhibition.vue';
import videoView from '@/subPages/components/video/video_list.vue';
export default {
	props: ['searchVal'],
	components: { companyList, newsList, productList, videoView, exhibition },
	data() {
		return {
			tabs: ['企业', '新闻', '产品', '视频', '展会'],
			current: 0,
			listNum: {},
			list: [],
			page: 1,
			status: 'loadmore',
			suo: true
		};
	},
	mounted() {
		let that = this;
		uni.$on('onReachBottom', data => {
			console.log('上拉加载');
			if (this.suo) {
				//定义个小锁，当没有数据时锁住suo
				this.status = 'loading';
				this.page = ++this.page;
				setTimeout(() => {
					this.getInfo(this.current);
				}, 1000);
			}
		});
	},
	methods: {
		tabChange(idx) {
			this.current = idx;
			this.list = [];
			this.page = 1;
			this.getInfo(idx);
		},
		parentSearch() {
			this.getInfo(this.current);
			this.list = [];
		},
		getInfo(tabCont) {
			let msg = {
				search_type: tabCont + 1, // 1 企业 2、新闻 3、产品 4、视频 5、展会
				kw: this.searchVal,
				page: this.page, //页数 （非必填）
				token: uni.getStorageSync('userInfo').token || '',
				uid: uni.getStorageSync('userInfo').userId || 0 //用户id
			};
			searchList(msg)
				.then(res => {
					if (res.code == 0) {
						// console.log(res);
						this.listNum = res.count;
						let data = res.data.list.data ? res.data.list.data : res.data.list;
						let pageSize = res.data.list.per_page || 10;
						this.list.push(...data);
						// console.log(this.list);
						if (data.length == 0) {
							this.status = 'nomore';
							this.suo = false;
						} else if (data.length < pageSize) {
							this.status = 'nomore';
							this.suo = false;
						} else {
							this.status = 'loadmore';
							this.suo = true;
						}
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('搜索失败', err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.tab_box {
	position: fixed;
	width: 100%;
	z-index: 999;
	.active {
		color: $color14;
		border-bottom: 3px solid $color14;
	}
	text {
		padding-bottom: 10rpx;
	}
}
.cont_h {
	min-height: 95vh;
	height: 100%;
}
.cont_box {
	background-color: #f2f2f2;
	padding-top: 60rpx;
	.empty_img {
		width: 100%;
		height: 500rpx;
		// margin-top: 300rpx;
		margin: auto;
		position: relative;
		top: 200rpx;
	}
}
</style>
